<template>
    <div class="index-section" v-if="currDetailData">
      <section class="product-detail">
        <div class="product-img" style="width: 300px;">		
          <img :src="currDetailData.mainPic" alt="" width="220">
        </div>
        <div class="product-meta" style="display: inline-block; width: 590px;">
          <h3 style="font-size: 24px; font-weight: 500;">{{ currDetailData.name }}</h3>
          <p style="color: #333; margin-top: 5px;">{{ currDetailData.subTitle }}</p>
          <div class="music-meta">
            <p><span class="mgray">商品类别：</span>{{currDetailData.categoryBean.name }}</p>
            <p><span class="mgray">上架日期：</span>{{ timestampToDayHM(currDetailData.publishTime) }}</p>
            <p><span class="mgray">库存：</span>{{ currDetailData.quantity }}</p>
            <p><span class="mgray">销量：</span>{{ currDetailData.saleCount }}</p>
            <p><span class="mgray">浏览：</span>{{ currDetailData.viewCount }}次</p>
            <div class="detail-buy">
              <div class="price"><span class="currency">￥</span>{{ formatAmount(currDetailData.price) }}</div>
              <div class="buy-btn" @click="onAddCart(currDetailData.productId)"><el-icon style="font-size: 18px;float: left;"><ShoppingCartFull /></el-icon>&nbsp;加入购物车</div>&nbsp;
              <div class="buy-btn" @click="onFav(currDetailData.productId);" style="background: #4997c4;"><el-icon style="font-size: 18px;float: left;"><Star /></el-icon>&nbsp;收藏</div>
            </div>
          </div>
        </div>
      </section>
      <section class="center" style="margin-top: 20px;">
        <div class="detail" style="width: 960px; padding: 20px 10px; margin: 0 auto; border-top: 1px solid #ddd; line-height: 26px;text-align: justify;" v-html="currDetailData.describ">
        </div>
        <div class="detail" style="width: 960px; padding: 20px 10px; margin: 0 auto; text-align: center;">
            <img :src="item" alt="" v-for="(item,idx) in currDetailData.picList" :key="idx" style="width: 620px;height: auto;">
        </div>
      </section>
      
      <section class="comment">
        <h4 style="color: #407e54;">商品评论（{{commentList.length }}）</h4>
        <ul>
            <li style="position: relative;" v-for="(item,id) in commentList" :key="id">
              <div class="user-info">
                <p class="user-name">{{item.userBean.nickName}}</p>
                <p class="ptime">{{ timestampToDayHM(item.publishTime) }}</p>
              </div>
              <div class="comment-cnt">
                <p>{{item.content }}</p>
              </div>
              <!-- <div style="position: absolute; right: 10px; top: 10px;">
                删除按钮
              </div> -->
            </li>
        </ul>
      </section>
    </div>
  </template>

<script setup lang="ts">
    import { ref, reactive, nextTick, toRef } from "vue";
    import baseService from "@/service/baseService";
    import { ElMessage, ElMessageBox } from "element-plus";
    import { timestampToDayHM, timestampToHM, timestampToDate, formatAmount } from "@/utils/utils"
    import { fileUploader } from '@/utils/upload.js'
    import { useRouter, useRoute } from 'vue-router';

    // 查询参数
    const queryForm = reactive({
    deptName: "",
    pageNo: 1,
    pageSize: 10
    });
    const router = useRouter();
    const route = useRoute();
    // 列表内容数量
    const total = ref(0);
    // 列表是否加载
    const loading = ref(true);
    // 列表返回值
    const list = ref<any[]>([]);

    // 表单实例
    const formRef = ref();
    // 是否打开弹出框
    const open = ref(false);
    const openDetail = ref(false);
    // 弹出框标题
    const title = ref("");
    const commentList = ref<any[]>([]);
    const currDetailData = ref();

    // 表单验证
    const rules = ref({
    deptName: [{ required: true, message: "规则名称不能为空", trigger: "blur" }],
    });

    function goBack(){
      router.back()
    }

    const getInfo = () => {
        const pid = route.query.pid
        console.log('从路由获取参数：', route.query)
    // shopId.value = infoId
    // loading.value = true;
    // baseService.get(`/admin/product/info/${infoId}`).then((res) => {
    //   console.log('获取商品信息：',res)
    //   product.value = res.data
    //   loading.value = false;
    // }).catch(() => {
    //   loading.value = false;
    // });
        baseService.get(`/api/product/detail/${pid}`).then((res) => {
            console.log('获取产品详情：',res)
            currDetailData.value = res.data.product;
            commentList.value = res.data.commentList;
            loading.value = false;
        }).catch(() => {
            loading.value = false;
        });
    }

    //加入购物车
    const onAddCart = (pid: number) => {
        let req = {productId: pid}
        baseService.post(`/api/cart/add`, req).then((res) => {
            console.log('加入购物车，响应：',res)
            ElMessage.success('已加入购物车');
            loading.value = false;
        }).catch(() => {
            loading.value = false;
        });
    }

    // 加入收藏
    const onFav = (pid: number) => {
        let req = {productId: pid}
        baseService.post(`/api/cart/fav`, req).then((res) => {
            console.log('加入收藏夹，响应：',res)
            ElMessage.success('已收藏商品');
            loading.value = false;
        }).catch(() => {
            loading.value = false;
        });
    }

    getInfo();
</script>

<style scoped >
.index-section .info {
	padding: 5px 0 0 0;
    height: 45px;
}
.index-section .title {
	color: #666;
	font-weight: bold;
	font-size: 16px;
    padding: 0 5px;
}
.index-section .artist{
	color: #26a4ed;
	padding: 5px;
	border-bottom: .5px solid #ddd;
    margin-bottom: 8px;
}
.index-section .mpd{
	float: right;
	color: #999;
}
.index-section .profile{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;    
    height: 82px;
}
.index-section .sat {
	float: right;
	font-size: 13px;
	color: #fff;
	font-style: normal;
	position: relative;
	top: 5px;
	right: 5px;
	background-color: #f96;
	height: 30px;
	padding: 5px 10px;
	cursor: pointer;
}
.index-section .detail-ticket {
	line-height: 35px;
	height: 35px;
    margin: 0 auto;
    width: 250px;
}
.index-section .detail-ticket div{display: inline-block;}
.index-section .detail-ticket .sat{
	float: none;
	display: inline-block;
	line-height: 35px;
	height: 35px;
	position: static;
	line-height: 28px;
	font-size: 14px;
}
.index-section .detail-ticket .sat a{color: #fff;}
.index-section .price {
	color: #f60;
	font-size: 14px;
}
.index-section .detail{
	text-align: left;
	padding: 12px 130px;
}
.index-section .price strong {
	font-size: 20px;
	letter-spacing: 1px;
}
.index-section .type {
	width: 110px;
    height: 40px;
    line-height: 50px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background-color: #59b200;
    position: absolute;
    transform: rotate(45deg);
    top: -5px;
    right: -40px;
}
.index-section .type-2{
	background-color: #f90;
}
.index-section .type-3{
	background-color: #4d89db;
}
#header #userInfo  li{
	height: 70px;
}
#header #userInfo a{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    padding: 0 4px;
    display: inline-block;
}
#header #userInfo .logout{
	display: none;
}
#header #userInfo:HOVER .logout{
	display: block;
}
#header #userInfo:HOVER .username{
	display: none;
}
.index-section .comment{
	width: 860px;
    padding: 20px 0;
    margin: 0 auto;
    text-align: left;
    box-sizing: border-box;
}
.index-section .comment li{
    min-height: 85px;
    padding: 10px 0;
    border-bottom: .5px solid #ccc;
}
.comment h3{
	margin: 10px 0;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}
.comment .user-info{
	float: left;
	padding-right: 20px;
}
.comment p{
  margin: 0;
  padding: 0;
}
.comment .user-info .user-name{
	font-size: 16px;
	color: #4997c4;
    padding-bottom: 8px;
}
.comment .user-info .ptime{
	color: #999;
  font-size: 14px;
  margin: 8px 0;
} 
.comment .comment-cnt{
	float: left;
    font-size: 14px;
    color: #666;
}
.comment .submit-btn{
	float: right;
	margin-top: 10px;
}
.global-search{
	width: 860px;
	margin: 0 auto;
	padding-bottom: 20px;
}
#searchAll{
	width: 380px;
	border-radius: 5px;
	border: 1px solid #ccc;
	height: 45px;
    padding: 0 20px;
    font-size: 16px;
}
.product .buy-div .price{
	color: #e4393c;
	font-size: 16px;
}
.product .buy-div .currency{
	font-size: 12px;
}
.product .buy-btn{
	font-size: 12px;
	cursor: pointer;
	float: right;
    line-height: 26px;
}
.product .buy-btn i{
	font-size: 16px;
	color: #407e54;
}
.product .buy-btn:HOVER, .product .buy-btn:HOVER i{
    font-weight: bold;
    color: #407e54;
}
.product-detail{
    width: 1000px;
    margin: 20px auto;
    color: #333;
}
.product-detail .product-meta{
    font-size: 14px;
}
.product-detail .product-meta h3{
    margin: 0;
    padding: 0;
}
.product-detail .product-img{
	float: left;
	width: 320px;
    padding: 0 30px;
    text-align: center;
}
.detail-buy{
	margin-top: 20px;
}
.detail-buy .buy-btn{
    display: inline-block;
    background-color: #4b9763;
    color: #fff;
    padding: 8px 10px;
    cursor: pointer;
}
.detail-buy .price{
	display: inline-block;
	color: #e4393c;
	font-size: 22px;
 	vertical-align: middle;
 	padding-right: 10px;
}
.detail-buy .currency{
	font-size: 14px;
}
.catagory .item:HOVER{
	background-color: #458b00;
	color: #fff;
}
.longtxt{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 400px;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.ckbtns{
	padding: 10px 0;
}
.userinfo{
	float: left;
}
.userinfo p{
	line-height: 30px;
	padding-left: 20px;
	font-size: 18px;
}
.product .profile, .product img, .product .title{
    cursor: pointer;
}
.product .profile:HOVER, .product .title:HOVER{
    color: #407e54;
}
</style>